<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <div>
          <!-- 先显示目录名称 -->
          <span v-if="item.type === 'folder'">目录：{{ item.name }}</span>
          <!-- 如果是目录，就递归调用自己 -->
          <component :is="name" v-if="item.type === 'folder'" :items="item.children" />
          <!-- 如果是文件，就显示文件的名称 -->
          <span v-else>{{ item.name }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true
  }
})

defineOptions({
  name: 'FolderTree'
})

const name = 'FolderTree'
</script>

<style scoped>
ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin: 5px 0;
}
</style>
